<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{ num }}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected: changeType === 'one'}" @click="changeFn('one')" href="javascript:;">全部</a>
			</li>
			<li>
				<a :class="{selected: changeType === 'two'}" @click="changeFn('two')" href="javascript:;">未完成</a>
			</li>
			<li>
				<a :class="{selected: changeType === 'three'}" @click="changeFn('three')" href="javascript:;">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="show" @click="del">清除已完成</button>
	</footer>
</template>

<script>
	export default {
      props: {
				 arr: {
					  type: Array,
						required: true					
				 }
			},

			data() {
			// 提供 changeType 数据 表示当前高亮的是谁
      // one   表示全部
			// two   表示未完成
			// three 表示已完成 

				return {
				   changeType: 'one'
				};
			},

			computed: {
		  	// todo =====  计算剩余未完成任务数量
				  num() {
						  return this.arr.filter(item => item.isDone === false).length
					},

        //  todo ======  清除已完成是否显示 / 隐藏
         show() {
					   return this.arr.some(item => item.isDone)
				 }
			},

			methods: {
       // todo ======  子传父   点击清空已完成
				 del() {
             this.$emit('delShow');
				 },

			// todo ===== 获得对应的 type 值、让点击按钮高亮
				 changeFn(type){
             this.changeType = type

             // todo ====== 子传父 将 任务状态发送过去  实现数据改变
						 this.$emit('changeType', type)
				 }
			}
	}
</script>
